<template>
  <div>
    <div class="flex-start m-b-30">
      <el-button icon="el-icon-back" plain round size="small" type="primary" @click="back">返回</el-button>
    </div>
      <el-descriptions title="用户信息">
      <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
      <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
      <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
      <el-descriptions-item label="备注">
        <el-tag size="small">学校</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="详情">
      <el-descriptions-item label="代工厂">kooriookami</el-descriptions-item>
      <el-descriptions-item label="产线">18100000000</el-descriptions-item>
      <el-descriptions-item label="编号">苏州市</el-descriptions-item>

      <el-descriptions-item label="上报时间">kooriookami</el-descriptions-item>
      <el-descriptions-item label="报盘方式">18100000000</el-descriptions-item>
      <el-descriptions-item label="产品">苏州市</el-descriptions-item>

      <el-descriptions-item label="生产批次">kooriookami</el-descriptions-item>
      <el-descriptions-item label="生产日期">18100000000</el-descriptions-item>
      <el-descriptions-item label="数据文件">苏州市</el-descriptions-item>
    </el-descriptions>

    <el-descriptions>
      <el-descriptions-item label="12">454</el-descriptions-item>
    </el-descriptions>

  </div>
</template>

<script>
import {
  iotdeviceDetail
} from "@/api/product/mainboard";
import {getIotProductList} from "@/api/product/product";
import {deepClone} from "@/util/util";

export default {
  name: "CollectDetail",
  props: {
    id: String,
  },
  data() {
    return {
      editObj: {},
      isShowEdit: false,
      activeName: 'sensor1',
      refreshDate: '',
      isLoading: false,
      options: [],
      params: '',
      sensorNum: 1
    }
  },
  watch: {
    id: {
      immediate: true,
      handler() {
        if(this.id) {
          // this.getDetail()
        }
      }
    }
  },
  methods: {
    back() {
      this.$emit('back')
    },
    getDetail() {
      this.productList()
      this.isLoading = true
      iotdeviceDetail({id: this.id}).then(res => {
        this.editObj = res.data.data
        this.info = deepClone(res.data.data)
        this.editObj.sensorBh = JSON.parse(this.editObj.sensorBh || '{}')
        this.editObj.sensorBd = JSON.parse(this.editObj.sensorBd || '{}')
        this.editObj.sensorConcentrateThreshold = JSON.parse(this.editObj.sensorConcentrateThreshold || '{}')
        this.editObj.sensorTemperatureThreshold = JSON.parse(this.editObj.sensorTemperatureThreshold || '{}')
        this.editObj.sensorHeightThreshold = JSON.parse(this.editObj.sensorHeightThreshold || '{}')
        this.attrs.forEach(attr => {
          attr.value = this.info[attr.attrKey]
          if(attr.attrKey == 'units') {
            attr.value = attr.value===1 ? 'kg':'L'
          }
        })
        this.sensorNum = Object.keys(JSON.parse(this.editObj.sensorData || '{}')).length
        this.refreshDate = new Date().toLocaleString()
      }).finally(() => {
        this.isLoading = false
      })
    },
    productList(){
      getIotProductList().then(res => {
        this.options = res.data.data
      })
    },
    handleEdit(attr) {
      this.params = attr
      this.isShowEdit = true
      console.log('attr', attr)
    }
  }
}
</script>

<style scoped lang="scss">
.attrs {
  display: flex;
  flex-wrap: wrap;

  .card {
    margin-right: 30px;
    margin-bottom: 30px;
  }
}
</style>
